<template>
  <a-form :form="form">
    <a-row :gutter="8">
      <a-col :md="20" :sm="12" class="col-wrapper">
        <stu-info1 ref="stuInfo1" :info.sync="info"/>
        <!--        <a-col :md="md" :sm="12">-->
        <!--          <a-form-item-->
        <!--            label="本人成分"-->
        <!--            :labelCol="{span: 6,offset: 1}"-->
        <!--            :wrapperCol="{span: 16, offset: 1}"-->
        <!--            selfUpdate-->
        <!--          >-->
        <!--            <a-input v-decorator="['brcf']"/>-->
        <!--          </a-form-item>-->
        <!--        </a-col>-->
        <a-col :md="md" :sm="12">
          <a-form-item
            label="会何种外语"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['hhzwy']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="外语熟练程度"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['wyslcdm']">
              <a-select-option v-for="i in TYPE0024" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="入学前最后学历"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['rxqzhxlm']">
              <a-select-option v-for="i in TYPE0018" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="入学前最后学位"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['rxqzhxwm']">
              <a-select-option v-for="i in TYPE0023" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="大学毕业学校"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select style="width:50%" v-decorator="['dxbyxxszsf']" @change="e => handlePChange(e, '' , 'dxbyxxdm')" :allowClear="true" showSearch :filterOption="filterOption">
              <a-select-option v-for="i in selectMenu.province" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
            <a-select style="width:50%" v-decorator="['dxbyxxdm']" :allowClear="true" showSearch :filterOption="filterOption">
              <a-select-option v-for="i in selectMenu.schoolList" :key="i.communityId" :value="String(i.xxdm)">{{ i.xxmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="大学毕业年月"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <!-- <a-date-picker v-decorator="['dxbyny']" style="width: 100%" format="YYYY-MM-DD"/> -->
            <a-select v-decorator="['dxbyny']" allowClear>
              <a-select-option v-for="i in graduateYearList" :key="i" :value="i">{{i}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="大学毕业专业"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select
              v-decorator="['dxbyzydm']"
              placeholder="输入专业号或名称搜索"
              :filterOption="false"
              @search="fetchDxbyzy"
              showSearch
              :notFoundContent="dxbyzy.fetching ? undefined : null"
              allowClear
            >
              <a-spin v-if="dxbyzy.fetching" slot="notFoundContent" size="small"/>
              <a-select-option v-for="i in dxbyzy.list" :key="i.id" :name="i.name" :value="i.code">{{i.name}}</a-select-option>
            </a-select>
            <!-- <a-select
              :allowClear="true"
              v-decorator="['dxbyzydm']"
            >
              <a-select-option v-for="i in TYPE0010" :key="i.id" :name="i.name" :value="i.code">{{ i.name }}</a-select-option>
            </a-select> -->
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="学士学位学科门类"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['xsxwxkmldm']">
              <a-select-option v-for="i in TYPE0090" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item style="width:100%"
                       label="授学士学位单位名称"
                       :labelCol="{span: 6,offset: 1}"
                       :wrapperCol="{span: 16, offset: 1}"
                        selfUpdate
                       >
            <a-select style="width:50%" v-decorator="['sxsxwdwszsf']" @change="e => handlePChange(e, '2' , 'sxsxwdwdm')" :allowClear="true"  showSearch :filterOption="filterOption">
              <a-select-option v-for="i in selectMenu.province" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
            <a-select style="width:50%"  v-decorator="['sxsxwdwdm']" :allowClear="true"  showSearch :filterOption="filterOption">
              <a-select-option v-for="i in selectMenu.schoolList2" :key="i.id" :value="String(i.xxdm)">{{ i.xxmc }}</a-select-option>
            </a-select>
            <a-input v-decorator="['sxsxwdwmc']" type="hidden"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="硕士毕业学校名称"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <!--<a-input v-decorator="['ssbyxxmc']"/>-->
            <!-- <a-select  v-decorator="['ssbyxxdm']" :allowClear="true" @change="(value, option) => {setData(option, 'ssbyxxmc')}">
              <a-select-option v-for="i in selectMenu.schoolList" :key="i.id" :value="String(i.communityId)">{{ i.xxmc }}</a-select-option>
            </a-select> -->
            <a-select style="width:50%" v-decorator="['ssbyxxdsf']" @change="e => handlePChange(e, '3' , 'ssbyxxdm')" :allowClear="true"  showSearch :filterOption="filterOption">
              <a-select-option v-for="i in selectMenu.province" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
            <a-select style="width:50%" v-decorator="['ssbyxxdm']" :allowClear="true" showSearch :filterOption="filterOption">
              <a-select-option v-for="i in selectMenu.schoolList3" :key="i.id" :value="String(i.xxdm)">{{ i.xxmc }}</a-select-option>
            </a-select>
            <a-input v-decorator="['ssbyxxdmc']" type="hidden"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="硕士毕业年月"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select v-decorator="['ssbyny']" allowClear>
              <a-select-option v-for="i in graduateYearList" :key="i" :value="i">{{i}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="硕士毕业专业"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
          <a-select
            v-decorator="['ssbyzym']"
            placeholder="输入专业号或名称搜索"
            :filterOption="false"
            @search="fetchSsbyzy"
            showSearch
            :notFoundContent="ssbyzy.fetching ? undefined : null"
            allowClear
          >
            <a-spin v-if="ssbyzy.fetching" slot="notFoundContent" size="small"/>
            <a-select-option v-for="i in ssbyzy.list" :key="i.id" :name="i.name" :value="i.code">{{i.name}}</a-select-option>
          </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="硕士学位学科门类"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select  v-decorator="['ssxwxkmlm']" :allowClear="true">
              <a-select-option v-for="i in TYPE0090" :key="i.id" :value="String(i.code)">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item style="width:100%"
                       label="授硕士学位单位名称"
                       :labelCol="{span: 6,offset: 1}"
                       :wrapperCol="{span: 16, offset: 1}"
                        selfUpdate>
            <a-select style="width:50%" v-decorator="['sssxwdwsf']" @change="e => handlePChange(e, '4' , 'sssxwdwm')" :allowClear="true" showSearch :filterOption="filterOption">
              <a-select-option v-for="i in selectMenu.province" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
            <a-select style="width:50%"  v-decorator="['sssxwdwm']" :allowClear="true"  showSearch :filterOption="filterOption">
              <a-select-option v-for="i in selectMenu.schoolList4" :key="i.id" :value="String(i.xxdm)">{{ i.xxmc }}</a-select-option>
            </a-select>
            <a-input v-decorator="['sssxwdwmc']" type="hidden"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="何时参加工作"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-date-picker v-decorator="['hscjgz']" style="width: 100%" format="YYYY-MM-DD"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="何地参加工作"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['hdcjgz']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="原工资级别"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['ygzjb']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="何时入党或团"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-date-picker :disabled="(info.zzmmm && info.zzmmm == '13')" v-decorator="['hsrdht']" style="width: 100%" format="YYYY-MM-DD"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="何地入党或团"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input :disabled="(info.zzmmm && info.zzmmm == '13')" v-decorator="['hdrdht']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="配偶姓名"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['poxm']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="配偶政治面貌"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select  v-decorator="['pozzmmm']" :allowClear="true">
              <a-select-option v-for="i in TYPE0020" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="配偶工作单位"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['pogzdw']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="配偶职位"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select  v-decorator="['pozw']" :allowClear="true">
              <a-select-option v-for="i in TYPE0006" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="所在研究室或机构"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['szjyshyjjg']"/>
          </a-form-item>
        </a-col>
      </a-col>
      <a-col :md="4" :sm="12">
        <a-form-item
            label=""
            :labelCol="{span: 0,offset: 1}"
            :wrapperCol="{span: 20, offset: 1}"
            selfUpdate
          >
          <a-upload
            name="avatar"
            style="width:120px;height:120px;"
            listType="picture-card"
            class="avatar-uploader"
            :showUploadList="false"
            :action="uploadUrl"
            list-type="picture"
            :headers="{
              Authorization: $store.state.account.token
            }"
            @change="handleChange"
          >

            <img v-if="imageUrl" :src="imageUrl" style="width: 200px;height: 200px;" alt="avatar" />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传照片</div>
            </div>
          </a-upload>
          <a-input v-decorator="['zpdz']" type="hidden"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item  style="margin-left: 24px; margin-right: 24px" selfUpdate label="参加过哪些研究工作">
      <a-input type="textarea" v-decorator="['cjgnxyjgz']" :autosize="{ minRows: 4, maxRows: 6 }"/>
    </a-form-item>
    <a-form-item style="margin-left: 24px; margin-right: 24px" selfUpdate label="有何论文和著作">
      <a-input type="textarea" v-decorator="['yhlwhzz']" :autosize="{ minRows: 4, maxRows: 6 }"/>
    </a-form-item>
    <a-form-item style="margin-left: 24px; margin-right: 24px" selfUpdate label="自我鉴定">
      <a-input type="textarea" v-decorator="['zwjd']" :autosize="{ minRows: 4, maxRows: 6 }"/>
    </a-form-item>
    <a-form-item
      label="备注"
      style="margin-left: 24px;"
    >
      <a-input type="textarea" v-decorator="['note']" :autosize="{ minRows: 4, maxRows: 6 }"/>
    </a-form-item>
  </a-form>
</template>
<script>
import { mapState } from 'vuex'
import { debounce } from 'utils/common'
import stuInfo1 from './stuInfo1'

const selectArr = ['TYPE0011', 'TYPE0088', 'TYPE0078', 'TYPE0017', 'TYPE0037', 'TYPE0013', 'TYPE0012', 'TYPE0002', 'TYPE0015', 'TYPE0020', 'TYPE0001', 'TYPE0305', 'TYPE0024', 'TYPE0018', 'TYPE0023', 'TYPE0090', 'TYPE0006']
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  // props: ['info'],
  props: {
    info: {
      type: Object,
      required: false,
      default: function () {
        return { zzmmm: '' }
      }
    }
  },
  data () {
    return {
      md: (12),
      uploadUrl:`${process.env.SERVICE_URL}upload/img`,
      selectMenu: {},
      loading: false,
      imageUrl: '',
      ssbyzy: { // 硕士毕业专业下拉
        list: [],
        fetching: false
      },
      dxbyzy: { // 大学毕业专业下拉
        list: [],
        fetching: false
      },
      graduateYearList: []
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  components: {stuInfo1},
  computed: {
    ...mapState({
      TYPE0006: state => state.app['TYPE0006'], // 职位
      TYPE0090: state => state.app['TYPE0090'], // 学士学位学科门类
      TYPE0023: state => state.app['TYPE0023'], // 入学前最后学位
      TYPE0018: state => state.app['TYPE0018'], // 入学前最后学历
      TYPE0024: state => state.app['TYPE0024'], // 外语熟练程度
      TYPE0305: state => state.app['TYPE0305'], // 学习方式
      TYPE0001: state => state.app['TYPE0001'], // 信仰宗教
      TYPE0020: state => state.app['TYPE0020'], // 政治面貌
      TYPE0015: state => state.app['TYPE0015'], // 国籍/地区
      TYPE0002: state => state.app['TYPE0002'], // 户口性质
      TYPE0012: state => state.app['TYPE0012'], // 婚姻状况
      TYPE0013: state => state.app['TYPE0013'], // 健康状况
      TYPE0037: state => state.app['TYPE0037'], // 港澳台侨
      TYPE0017: state => state.app['TYPE0017'], // 民族
      TYPE0078: state => state.app['TYPE0078'], // 血型
      TYPE0088: state => state.app['TYPE0088'], // 证件类型
      TYPE0011: state => state.app['TYPE0011'] // 性别
    })
  },
  watch: {
    info (val) {
      if (val.xh) {
        this.initForm()
      }
    }
  },
  created () {
    const curYear = new Date().getFullYear()
    function generateYearArray (start, end) {
      let arr = []
      let len = end - start
      for (let index = 0; index < len; index++) {
        arr.push(...[`${start + index}-07-01`,`${start + index}-12-31`])
      }
      return arr
    }
    this.graduateYearList = generateYearArray(curYear-100,curYear+20)
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
    this.initSelectMenu()
  },
  methods: {
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    initForm () {
      // this.$api.student.stuXjInfo(this.xh).then(res => {
      this.$nextTick(() => {
        if(this.info.dxbyxxszsf){
          this.handlePChange(this.info.dxbyxxszsf, '' , 'dxbyxxdm')
        }
        if(this.info.sxsxwdwszsf){
          this.handlePChange(this.info.sxsxwdwszsf, '2' , 'sxsxwdwdm')
        }
        if(this.info.ssbyxxdsf){
          this.handlePChange(this.info.ssbyxxdsf, '3' , 'ssbyxxdm')
        }
        if(this.info.sssxwdwsf){
          this.handlePChange(this.info.sssxwdwsf, '4' , 'sssxwdwm')
        }
        if(this.info.dxbyzydm){
          this.fetchDxbyzy(this.info.dxbyzydm)
        }
        if(this.info.ssbyzym){
          this.fetchSsbyzy(this.info.ssbyzym)
        }
        if (this.info.zpdz) {
          this.imageUrl = `${process.env.IMG_URL}${this.info.zpdz}`
        }
        if (this.info.dxbyny) {
          this.info.dxbyny = this.info.dxbyny.format('YYYY-MM-DD')
        }
        if (this.info.ssbyny) {
          this.info.ssbyny = this.info.ssbyny.format('YYYY-MM-DD')
        }
        let keys = Object.keys(this.form.getFieldsValue())
        let obj = {}
        keys.forEach(key => {
          obj[key] = this.info[key]
        })
        this.form.setFieldsValue(obj)
      })
    },
    initSelectMenu () {
      let allRequest = [
        this.$api.base.areaList()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          province: res[0].data
        }
      })
    },
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        let path = info.file.response.data[0]
        this.form.setFieldsValue({zpdz: path})
        this.form.getFieldsValue()
        this.imageUrl = `${process.env.IMG_URL}${path}`
      }
    },
    beforeUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片不能超过2MB!')
      }
      return isLt2M
    },
    setData (option, key) {
      this.form.setFieldsValue({[key]: option.data.attrs.name})
    },
    handlePChange(v, i, k) {
      this.form.setFieldsValue({[k]: ''})
      this.$api.base.schoolInfoQueryAll({xzqhsdm: v}).then(res => {
        this.$set(this.selectMenu, `schoolList${i}` , res.data)
      })
    },
    fetchSsbyzy: debounce(async function (value) {
        if(value && value.length > 1) {
          this.ssbyzy.fetching = true
          let { data } = await this.$api.dict.queryAll({
            typeCode: 'TYPE0010',
            nameOrCode: value
          })
          this.ssbyzy.list = data
          this.ssbyzy.fetching = false
        }
    }),
    fetchDxbyzy: debounce(async function (value) {
      if(value && value.length > 1){
        this.dxbyzy.fetching = true
        let { data } = await this.$api.dict.queryAll({
          typeCode: 'TYPE0010',
          nameOrCode: value
        })
        this.dxbyzy.list = data
        this.dxbyzy.fetching = false
      }
    })
  }
}
</script>

<style lang="less" scoped>
  /*.col-wrapper .ant-col-sm-12, .ant-col-md-8{*/
    /*min-height: 91px;*/
  /*}*/
</style>
